<template>
    <div class="page-content">
        <!-- 表顶区域 -->
        <TableBar :columns="columns" @changeColumn="changeColumn" :layout="layout">
            <div slot="top">
                  <el-input placeholder="请输入内容" v-model="inputtext" class="input-with-select" style="width:500px;margin-bottom:5px;">
                    <el-select v-model="select" slot="prepend" placeholder="请选择" v-auth="'breed_base_select'">
                      <el-option label="基地负责人" value="1"></el-option>
                      <el-option label="基地编号" value="2"></el-option>
                      <el-option label="基地名称" value="3"></el-option>
                    </el-select> 
                    <el-button slot="append" icon="el-icon-search" @click="search" class="search" v-auth="'breed_base_select'"></el-button>
                  </el-input>
            </div>
            <div slot="bottom">
                <el-button
                type="primary"
                plain
                size="mini"
                @click="show_add()"
                v-auth="'breed_base_insert'"
                >新增</el-button>
                <el-button
                type="danger"
                plain
                size="mini"
                @click="delSelectBox()"
                v-auth="'breed_base_delete'"
                >批量删除</el-button>
            </div>
        </TableBar>

        <!-- 表格区域 -->
        <TheTable
        :page="page" 
        :showPage="true" 
        :data="baseinfolist"
        @changeSize="changeSize" 
        @changePage="changePage"
        @selectData="getSelectBox"
        >

            <div
            v-for="(item,index) in columns"
            :key="index"
            class="item"
            effect="dark"
            placement="top-start">
                <el-table-column
                label="序号"
                type="selection"
                v-if="index == '1'"
                width="55"
                >
                </el-table-column>
                <el-table-column
                :label="item.name"
                v-if="item.show"
                :prop="item.prop"
                show-overflow-tooltip
                ></el-table-column>
            </div>

            <el-table-column label="操作" align="center" width="200px">
                <template slot-scope="scope">
                    <el-button type="primary"
                    icon="el-icon-edit"
                    size="mini"
                    @click="show_edit(scope.row)"
                    v-auth="'breed_base_update'"
                    ></el-button>
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      size="mini"
                      v-auth="'breed_base_delete'"
                      @click="delbaseinfo(scope.row.id)"
                    ></el-button>
                </template>
            </el-table-column>
        </TheTable>


        <!-- 编辑对话框 -->
        <el-dialog
        :title="title1"
        :width="width"
        :visible.sync="showedit"
        top="20vh"
        >
        <Dialogform :formcontent="formcontent" :form="formedit" @closeform="closeform" @submit="editbaseinfo"></Dialogform>
        </el-dialog>

        <!-- 新增对话框 -->
        <el-dialog
        :title="title2"
        :width="width"
        :visible.sync="showadd"
        top="20vh"
        >
        <Dialogform :formcontent="formcontent" :form="formadd" @closeform="closeform" :reset="reset" @submit="addbaseinfo" ref="Dialogform"></Dialogform>
        </el-dialog>

    </div>
</template>

<script>
import 
{ getBaseInfo,
AddBaseinfo,
editBaseinfo,
DelByids,
DelByid,
SearchByid,
SearchBybasename,
SearchByname
} from '../../Api/productionmanage/Breed_base.js'
import Dialogform from '../../components/ProductionManagement/BreedingBase/Dialog'
import { setdata } from '../../store/modules/leadershippositions/consumption_takedata'
export default {
    name: "BreedingBase",
    components: {
        Dialogform,
    },
    data() {
        return {
            title1: '编辑基地信息',
            title2: '新增基地信息',
            reset: true,
            // 搜索框
            select: '1',
            inputtext: '',
            // 对话框宽度
            width: '1000px',
            formcontent: [
                {label:'基地名称',prop: 'name',placeholder:'请填写基地名称'}, // name
                {label:'营业执照注册号',prop: 'registerNumber',placeholder:'请填写营业执照注册号'}, // registerNumber
                {label:'负责人',prop: 'principalName',placeholder:'请填写负责人'}, // principalName
                {label:'注册资金',prop: 'funds',placeholder:'请填写注册资金'},  // funds
                // {label:'省份',prop: 'province',placeholder:'请填写省份'}, // province
                // {label:'城市',prop: 'city',placeholder:'请填写城市'},  // city
                // {label:'区',prop: 'region',placeholder:'请填写区'}, // region
                {label:'门牌号',prop: 'houseNumber',placeholder:'请填写门牌号'}, // houseNumber
                {label:'营业范围',prop: 'scope',placeholder:'请填写营业范围'}, // scope
                {label:'介绍',prop: 'introduction',placeholder:'请填写介绍'} // introduction
            ],
            // 显示修改对话框
            showedit: false,
            // 显示新增对话框
            showadd: false,
            // 养殖基地数据
            baseinfolist: [],
            // 表头数据
            columns: [
                { name: "基地名称", show: true, prop: "name" },
                { name: "基地编号", show: true, prop: "id" },
                { name: "营业执照注册号", show: true, prop: "registerNumber" },
                { name: "负责人", show: true, prop: "principalName" },
                { name: "注册资金", show: false, prop: "funds" },
                { name: "省份", show: true, prop: "province" },
                { name: "城市", show: false, prop: "city" },
                { name: "区", show: false, prop: "region" },
                { name: "营业范围", show: false, prop: "scope" },
                {  name: "企业Id", show: false, prop: "enterpriseId" }
            ],
            // 表格布局
            layout: "search, refresh, column",
            // 分页数据对象
            page: {
                current: 1,
                pageSize: 10,
                total: 0
            },
            // 表单内容
            formedit: {},
            formadd: {
                name: '', // 基地名
                registerNumber: '', // 注册号
                principalName: '', // 负责人姓名
                funds: '', // 注册基金
                city: '',  // 城市
                province: '', // 省份
                region: '',  // 区
                scope: '', // 营业范围
                picture: '',  // 基地图片
                introduction: '',  // 基地简介
                houseNumber: '', // 门牌号
                latitude: '', // 纬度
                longitude: '', // 经度
            },
            // 选中的信息
            ids: []
        }
    },
    watch: {
        'inputtext': {
            handler() {
                if(this.inputtext.trim() == '') {
                    this.getInfo()
                }
            }
        }
    },
    created() {
        this.getInfo()
        setdata()
    },
    methods: {
        // 获取养殖基地数据
        async getInfo() {
            await getBaseInfo(this.page).then(res => {
                if(res.data.statusCode !== 20000){
                    return this.$message.error('请求数据失败')
                }
                this.baseinfolist = res.data.data.records
                this.page.total = res.data.data.total
            })
        },
        // 修改表头 
        changeColumn(newcolumns) {
            this.columns = newcolumns;
        },
        // 分页变动
        changePage(page) {
            this.page = page
            this.getInfo()
        },
        changeSize(page) {
            this.page = page
            this.getInfo()
        },
        // 显示编辑基地信息对话框
        show_edit(info) {
            this.showedit = true
            const a = JSON.stringify(info)
            this.formedit = JSON.parse(a)
            console.log(this.formedit);
            // 删除不允许修改提交的属性
            delete this.formedit.enterpriseId
        },
        show_add() {
            this.showadd = true
            this.showedit = false
        },
        // 表单清空方法
        closeform() {
            if(this.showedit == true) {
                return this.showedit = false
            }
            this.showadd = false
        },
        // 接受子组件传回的表单
        submit(form) {
            console.log(form);
        },
        // 新增基地
        async addbaseinfo(form) {
            console.log(form);
            await AddBaseinfo(form).then(res => {
                console.log(res);
                if(res.data.statusCode !== 20000) {
                    return this.$message.error('添加基地失败')
                }
                this.$message.success(res.data.message)
                this.getInfo()
                this.showadd = false
                console.log(this.$refs);
                this.$refs.Dialogform.resetform()
            })
        },
        // 编辑基地信息
        async editbaseinfo(form) {
            await editBaseinfo(form).then(res => {
                console.log(res);
                if(res.data.statusCode !== 20000) {
                    return this.$message.error('基地更新失败')
                }
                this.$message.success(res.data.message)
                this.getInfo()
                this.showedit = false
            })
        },
        // 单独删除基地信息
        async delbaseinfo(id) {
            const confirmResuly = await this.$confirm(
                "此操作将会永久删除所选中得基地信息,是否继续？",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            ).catch(err => {
                return err
            })
            if (confirmResuly !== "confirm") {
                return this.$message.info('已取消删除')
            }
            await DelByid(id).then(res => {
                if(res.data.statusCode !== 20000) {
                    return this.$message.error('删除失败')
                }
                this.getInfo()
                this.$message.success('删除成功')
            })
        },
        // 批量删除基地信息
        getSelectBox(boxlist) {
            boxlist.map(item => {
                this.ids.push(item.id)
            })
        },
        async delSelectBox() {
            const confirmResuly = await this.$confirm(
                "此操作将会永久删除所选中得基地信息,是否继续？",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            ).catch(err => {
                return err
            })
            if (confirmResuly !== "confirm") {
                return this.$message.info('已取消删除')
            }
            await DelByids(this.ids).then(res => {
                if(res.data.statusCode !== 20000) {
                    return this.$message.error('删除失败')
                }
                this.$message.success('删除成功')
                this.getInfo()
            })
        },
        takeres(res) {
            console.log(res);
            if(res.data.statusCode == 20001) {
                return this.$message.info('查询结果为空')
            }else if(res.data.statusCode !== 20000) {
                return this.$message.error('查询失败')
            }
            this.$message.success('查询成功')
            this.baseinfolist= res.data.data
        },
        async search() {
            switch(this.select) {
                case '1':
                    await SearchByname(this.inputtext,this.page).then(res=> {
                        this.takeres(res)
                    })
                    break;
                case '2':
                    await SearchByid(this.inputtext).then(res => {
                        this.takeres(res)
                    })
                    break;
                case '3':
                    await SearchBybasename(this.inputtext,this.page).then(res => {
                        this.takeres(res)
                    })
                    break;
            }
        },
        // 获取地址
        getaddress(a) {
            console.log(a);
        }
    },
    
}
</script>

<style lang="sass" scoped>
</style>